<script setup lang="ts">

import {defineProps, onMounted, ref, watch} from "vue";
import router from "../router";

interface Movie {
  MID: string;
  fanart: string;
  length: string;
  length_sec: string;
  name: string;
  update_time:string;
}

interface Movie_history {
  MID: string;
  play_time: string;
  update_time:string;
}

const movieData = ref<Movie[]>([]);
const movieHistoryData = ref<Movie_history[]>([]);
const toMID = ref(''); // 定义 ref
const play_press = ref(0); // 定义 ref

// 将长度字段转换为小时：分钟格式
const formatLength = (length: string): string => {
  const minutes = parseInt(length);
  if (minutes >= 60) {
    const hours = Math.floor(minutes / 60);
    const remainingMinutes = minutes % 60;
    return `${hours.toString().padStart(2, '0')}:${remainingMinutes.toString().padStart(2, '0')}:00`;
  } else {
    return `${minutes}分钟`;
  }
};
const fetchMovieHistoryData = async () => {
  try {
    const formData = new FormData();
    // Append any form fields you want to send
    formData.append('key',String(localStorage.getItem('key')));
    formData.append('MID',toMID.value);

    const response = await fetch('https://movie.cpb2013.top/account_history.php?mode=get_user_movie_history',{method: 'POST',body:formData});
    const responseData = await response.json();
    // console.log(responseData);
    if (responseData.status === 'ok') {
      movieHistoryData.value = responseData.data.map((movie: any) => ({
        MID: movie.MID,
        play_time: movie.play_time,
        update_time: movie.update_time
      }));
      // console.log(movieData.value[0]);
      // console.log(responseData);
      // calculatedPercentage();
    } else {
      console.error('Error fetching movie data:', responseData.message);
    }
  } catch (error) {
    console.error('Error fetching movie data:', error);
  }
}

const delMovieHistoryData = async () => {
  try {
    const formData = new FormData();
    // Append any form fields you want to send
    formData.append('key',String(localStorage.getItem('key')));
    formData.append('MID',toMID.value);

    const response = await fetch('https://movie.cpb2013.top/account_history.php?mode=remove_user_movie_history',{method: 'POST',body:formData});
    const responseData = await response.json();
    // console.log(responseData);
    if (responseData.status === 'ok') {
      // console.log(responseData.msg);
    } else {
      console.error('Error fetching movie data:', responseData.message);
    }
  } catch (error) {
    console.error('Error fetching movie data:', error);
  }
}

const fetchMovieData = async () => {
  try {
    const response = await fetch('https://movie.cpb2013.top/movie_info.php?MID='+toMID.value);
    const responseData = await response.json();
    // console.log(responseData);
    if (responseData.status === 'ok') {
      movieData.value = responseData.data.map((movie: any) => ({
        MID: movie.MID,
        fanart: movie.fanart,
        length: formatLength(movie.length),
        length_sec: movie.length,
        name: movie.name
      }));
      // console.log(movieData.value[0]);
      // console.log(responseData);
    } else {
      console.error('Error fetching movie data:', responseData.message);
    }
  } catch (error) {
    console.error('Error fetching movie data:', error);
  }
}

const props = defineProps({
  toMID: {
    type: String,
    required: true, // 将 prop 标记为必需的
  }
});


// const user_key = String(localStorage.getItem('key'));

onMounted(() => {
  toMID.value = props.toMID;
  fetchMovieData();
  fetchMovieHistoryData();

});

const GoMovie = (MID: string) => {
  // console.log('chick')
  router.push({ path: 'movie_tmp_pc', query: { MID } });
}

watch([movieData, movieHistoryData], () => {
  if (movieData.value.length > 0 && movieHistoryData.value.length > 0) {
    calculatedPercentage();
  }
});

const calculatedPercentage = () => {
  if (movieHistoryData.value.length > 0 && movieData.value.length > 0) {
    const playTimeInSeconds = parseInt(movieHistoryData.value[0].play_time, 10);
    const totalTimeInSeconds = parseInt(movieData.value[0].length_sec, 10) * 60;
    play_press.value = (playTimeInSeconds / totalTimeInSeconds) * 100;
    // console.log(play_press.value);
  }
};

</script>

<template>
<view class="W_History_main" v-if="movieData.length > 0 && movieHistoryData.length > 0">
  <view class="W_History_photo">
    <view class="W_History_photo_items">
      <el-image :src="movieData[0].fanart" style="width: 100%; height: 100%;border-radius: 5px 5px;" fit="cover" @click="GoMovie(toMID)"/>
      <view class="W_History_progress">
        <el-progress
            :show-text="false"
            :text-inside="true"
            :stroke-width="5"
            :percentage="play_press"
            status="warning"
        />
      </view>
    </view>

  </view>
  <view class="W_History_info">
    <view class="W_History_name">
      {{movieData[0].name}}
    </view>
    <view class="W_History_time">
      <font-awesome-icon icon="fa-solid fa-desktop" size="lg" style="color: #d1d1d1;margin-right: 5px" />
      {{movieHistoryData[0].update_time}}
    </view>
    </view>

  <view class="W_History_bth">
    <font-awesome-icon icon="fa-regular fa-circle-xmark" style="color: #d1d1d1;" size="xl" @click="delMovieHistoryData()"/>
  </view>
</view>
</template>

<style scoped>
.W_History_main
{
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 80px;
  padding: 20px 5px 20px 5px;
}
.W_History_photo
{


  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 30%;
  max-width: 30%;
  padding: 10px 10px 5px 5px;
  z-index: 1000;
}
.W_History_photo_items
{
  border-radius: 20px;
  position: relative;
  display: flex;
  width: 100%;
}
.W_History_progress
{
  border-radius: 10px;
  //margin: 10px 10px 5px 5px;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1001;
  //height: 5%;
}
.W_History_info
{
  width: 50%;
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  height: 100%;
}
.W_History_bth
{
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  height: 100%;
  justify-content: right;
}
.W_History_name
{
  width: 100%;
  font-size:18px;
  font-weight: 600;
  height: 70%;
  color: black;
}
.W_History_time
{
  height: 25%;
  font-size:12px;
  font-weight: 500;
  color: #d1d1d1;
  align-items: end;
}

::v-global(.el-progress-bar__outer) {
  border-radius: 0 !important;
}
::v-global(.el-progress-bar__inner) {
  border-radius: 0 !important;
}
</style>